<template>
    <a-modal
        :bodyStyle="{maxHeight: maxHeight+'px', overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="maskClosable"
        @ok="ok"
        @cancel="cancel"
        cancelText="关闭"
        v-drag
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }">
        
        <a-spin :spinning="confirmLoading">
            <a-row :gutter="[20,20]">
                 <a-col :span="13">
                     <component v-if="component" :is="component" ref="leftComponent" :componentParam="componentParam" ></component>
                 </a-col>
                 <a-col :span="1" style="padding-top:60px;">
                     <div>
                        <button @click="addItem" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></button>
                     </div>
                     <div>
                        <button @click="removeItem" style="margin-top:40px;" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></button>

                     </div>
                 </a-col>
                 <a-col :span="10">
                    <a-table 
                        size="middle"
                        :rowKey="uniqueField"
                        :columns="columns" 
                        :dataSource="dataSource" 
                        :customRow="customRow" 
                        :pagination="false"
                        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange }"></a-table>
                 </a-col>
            </a-row>
        </a-spin>
    </a-modal>
</template>

<script>

export default {
    name:'LModalTransfer',
    props:{
        uniqueField:{
            type:String,
            required:true,
            default:()=>"wzCode"
        },
        columns:{
            type:Array,
            default:()=>[]
        },
        component:{
            type:Object,
            default:()=>{}
        },
        componentParam:{
            type:Object,
            default:()=>{}
        },
        componentQueryForm:{
            type:Array,
            default:()=>[]
        },
        
        title:String,
        width:{
            type:Number,
            default:600
        },
        maxHeight:{
            type:Number,
            default:600
        },
        visible:{
            type:Boolean,
            default:false
        },
        confirmLoading:{
            type:Boolean,
            default:false
        },
        maskClosable:{
            type:Boolean,
            default:true
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 4 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 20 }}
            }
        },
        handleOk:Function,
        handleCancel:Function,
  
    },
    data(){
        return{
          dataSource:[],
          selectedRowKeys:[],
          selectedRows:[],
        }
    },
    created(){
       
        
    },
    watch:{
        visible () {
            let that = this;
            if (that.visible) {
                that.dataSource=[]
            }
        }
    },
    methods:{
        ok(){
            this.$emit('handleOk',this.dataSource);
        },
        cancel(){
            this.$emit('handleCancel');
        },
        addItem(){
            let that = this
            if(!that.uniqueField){
                 that.$message.warning("未设置唯一验证属性 uniqueField ")
            }
            let selectedRows = that.$refs.leftComponent.getSelectedRows()
            if(selectedRows && selectedRows.length>0 && that.columns && that.columns.length>0){
                selectedRows.forEach(function(row,index){
                    let obj = {} 
                    that.columns.forEach(function(column,index){
                         obj[that.uniqueField] = row[that.uniqueField]
                         obj[column['dataIndex']] = row[column['dataIndex']] || ''
                         obj['selectRecord'] = row
                     });

                     //判断是否有重复数据
                     var isCanAdd = that.dataSource.find((v) => {
                        return v[that.uniqueField] == obj[that.uniqueField]
                     })

                     if(!isCanAdd){
                         that.dataSource.push(obj)
                     }
                })
                that.$refs.leftComponent.onCancelSelect()
            }
        },
        removeItem(){
            let that = this
            if(that.selectedRows && that.selectedRows.length>0){
                let idList= that.selectedRows.map(item => item[that.uniqueField]);
                that.dataSource= that.dataSource.filter( item => {
                    return !idList.includes(item[that.uniqueField]);
                })
            }
            that.selectedRowKeys=[]
            that.selectedRows=[]
           
        },
       
        //点击行事件，暂时没用
        customRow(record){
            return{
                on:{
                    click:(e)=>{
                       
                    }
                }
            }
        },
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
      
        },
       
    }
}
</script>